<template>
  <div class="data-time">
    <div class="avatar">
      <img src="@/components/images/tx.png" alt="" />
      <p>立即登录</p>
    </div>
    <ul>
      <li>
        <img src="@/components/images/my-left.png" alt="" />
        <div class="common-p">电影订单</div>
      </li>
      <li>
        <img src="@/components/images/my-right.png" alt="" />
        <div class="common-p">电影订单</div>
      </li>
    </ul>
    <div class="my-card">
      <img src="@/components/images/mzw.png" alt="" class="font" />
      <span class="label">卖座券</span>
      <img src="@/components/images/right.png" alt="" class="arrow" />
    </div>
    <div class="my-card">
      <img src="@/components/images/hb.png" alt="" class="font" />
      <span class="label">组合红包</span>
      <img src="@/components/images/right.png" alt="" class="arrow" />
    </div>
    <div class="my-card">
      <img src="@/components/images/ye.png" alt="" class="font" />
      <span class="label">余额</span>
      <span class="price-fmt">
        <i style="font-size: 12px">￥</i>
        <span class="interge" style="font-size: 18px">0</span>
      </span>
      <img src="@/components/images/right.png" alt="" class="arrow" />
    </div>
    <div class="my-card">
      <img src="@/components/images/kf.png" alt="" class="font" />
      <span class="label">帮助与客服</span>
      <img src="@/components/images/right.png" alt="" class="arrow" />
    </div>
    <div class="my-card">
      <img src="@/components/images/sz.png" alt="" class="font" />
      <span class="label">设置</span>
      <img src="@/components/images/right.png" alt="" class="arrow" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
};
</script>

<style scoped>
 .data-time{
        background: #f4f4f4;
       
    }
    .avatar{
        text-align: center;
        margin-top: -44px;
        height: 200px;
        padding-left: 22px;
        padding-top: 64px;
        background: url(@/components/images/bg.png);
        background-size: cover;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        color: #fff;
    }
    .avatar img{
        width: 65px;
        height: 65px;
        border-radius: 35px;
        margin-right: 20px;
        border: 2px solid #fff;
    }
    ul{
        width: 100%;
        margin: 0 auto;
        display: flex;
        text-align: center;
        font-size: 13px;
        padding: 0;
        height: 79px;
        background: #fff;
        margin-bottom: 10px;
        align-items: center;
       
    }
     ul li{
         flex: .0625rem;
         text-align: center;
        
     }
    ul li img {
        width: 1.625rem;
      
         margin: auto;
    }
    .common-p{
        font-size: .8125rem;
        color: #797d82;
    }
    .my-card{
        background: #fff;
        padding: 0 15px;
        height: 49px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        position: relative;
    }
    .my-card .font{
        width: 1.25rem;
    }
    .my-card:after{
        content: " ";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 1px;
        border-bottom: 1px solid #ededed;
        position: absolute;
        left: .8125rem;
    }
    .arrow{
        width: .375rem;
    }
    .label{
        margin-left: 15px;
        color: #191a1b;
        flex: 1;
    }
    .price-fmt{
        text-align: right;
        color: #797d82;
        padding-right: 14px;
    }
    .price-fmt i{
        font-style:normal;
    }
</style>